<template>
  <div class="avue-top">
    <div class="logon-head">
      <a href="/" class="logo">
        <img alt="美团外卖商家中心" src="@/assets/image/logo.jpg">
      </a>
      <span class="h2">熊猫不走</span>
      <em>|</em>
      <span>管理后台 </span>
     <em>|</em>
     <span>版本号:{{version}}</span>
    </div>
    <!-- <div class="search" style="left: 30%;position: absolute;">
        <top-search></top-search>
      </span>
    </div> -->
    <div class="top-bar__left">
      <div class="avue-breadcrumb"
           :class="[{ 'avue-breadcrumb--active': isCollapse }]"
           v-if="showCollapse">
        <i class="icon-navicon"
           @click="setCollapse"></i>
      </div>
    </div>
     <div class="top-bar__left" style="margin-left: 30px;" @click="setCollapse">切换左视图</div>
    <el-select v-model="value" placeholder="请选择" filterable @keydown.native="keydown($event)" style="top:10px;left: 50%;position: absolute;">
      <el-option v-for="item in cityList" :key="item.id" id="getList" :label="item.deptName" :value="item.deptName" @visible-change='citydataList'>
        <span style="width: 100%;display: block;" @click="headleCity(item.id,item.deptName)">{{item.deptName}}</span>
      </el-option>
    </el-select>


    <div class="top-bar__title">
      <!-- <div class="top-bar__item top-bar__item--show"
           v-if="showMenu">
        <top-menu></top-menu>
      </div>-->
      <!-- <span class="top-bar__item"
            v-if="showSearch">
        <top-search></top-search>
      </span>-->
    </div>
    <div class="top-bar__right">
      <!--  <el-tooltip v-if="showColor" effect="dark" :content="$t('navbar.color')" placement="bottom">
        <div class="top-bar__item">
          <top-color></top-color>
        </div>
      </el-tooltip>-->

      <el-tooltip v-if="showDebug" effect="dark" :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')"
        placement="bottom">
        <div class="top-bar__item">
          <!-- <top-logs></top-logs> -->
        </div>
      </el-tooltip>
      <!-- <el-tooltip v-if="showLock" effect="dark" :content="$t('navbar.lock')" placement="bottom">
        <div class="top-bar__item">
          <top-lock></top-lock>
        </div>
      </el-tooltip> -->
      <!-- <el-tooltip v-if="showTheme" effect="dark" :content="$t('navbar.theme')" placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-theme></top-theme>
        </div>
      </el-tooltip> -->
      <!-- <el-tooltip effect="dark" :content="$t('navbar.language')" placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-lang></top-lang>
        </div>
      </el-tooltip> -->
      <el-tooltip effect="dark" content="通知" placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-notice></top-notice>
        </div>
      </el-tooltip>

      <el-tooltip v-if="showFullScren" effect="dark" :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')"
        placement="bottom">
        <div class="top-bar__item">
          <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'" @click="handleScreen"></i>
        </div>
      </el-tooltip>
      <img class="top-bar__img" :src="userInfo.avatar">
      <el-dropdown>
        <span class="el-dropdown-link">
          {{userInfo.userName}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/">{{$t('navbar.dashboard')}}</router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout" divided>{{$t('navbar.logOut')}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
  let deptIds='',deptNames;
  import {
    mapGetters,
    mapMutations,
    mapState
  } from "vuex";
  import {
    fullscreenToggel,
    listenfullscreen
  } from "@/util/util";


  // import topLock from "./top-lock";
  import topMenu from "./top-menu";
  import topSearch from "./top-search";
  // import topTheme from "./top-theme";
  import topLogs from "./top-logs";
  import topColor from "./top-color";
  import topLang from "./top-lang";
  import topNotice from "./top-notice"
  import {
    deptdepts
  } from "@/api/shop";
  import website from '@/config/website';
  export default {
    components: {
      // topLock,
      topMenu,
      topSearch,
      // topTheme,
      topLogs,
      topColor,
      topLang,
      topNotice
    },
    name: "top",
    data() {
      return {
        cityList: [],
        value: "",
        roleId: 1,
        deptId: "",
        deptName: '',
        lastdeptId: '',
        lastName: '',
        version: website.version,
      };
    },
    filters: {},

    mounted() {
      deptIds = this.$route.query.cityId;
      deptNames = this.$route.query.deptName;
      listenfullscreen(this.setScreen);
      setTimeout(() => {
        if(JSON.parse(window.localStorage.getItem("saber-areaId")) == null) {
          this.citydataList();
        } else {
          this.cityId = JSON.parse(window.localStorage.getItem("saber-areaId")).content;
          this.citydataList();
        }
      },1000)
    },
    computed: {
      ...mapState({
        showDebug: state => state.common.showDebug,
        showTheme: state => state.common.showTheme,
        showLock: state => state.common.showLock,
        showFullScren: state => state.common.showFullScren,
        showCollapse: state => state.common.showCollapse,
        showSearch: state => state.common.showSearch,
        showMenu: state => state.common.showMenu,
        showColor: state => state.common.showColor
      }),
      ...mapGetters([
        "userInfo",
        "isFullScren",
        "tagWel",
        "tagList",
        "isCollapse",
        "tag",
        "logsLen",
        "logsFlag"
      ])
    },

    methods: {
      ...mapMutations(["SET_AREAID"]),
      ...mapMutations(["SET_AREANAME"]),
      handleScreen() {
        fullscreenToggel();
      },
      setCollapse() {
        this.$store.commit("SET_COLLAPSE");
      },
      setScreen() {
        this.$store.commit("SET_FULLSCREN");
      },
      headleCity(item, name) {
        this.$alert('是否继续', '此操作将切换城市', "提示", {
          confirmButtonText: '确定',
          type: "warning"
          // callback: action => {
          //   this.$message({
          //     type: 'info',
          //     message: `action: ${ action }`
          //   });
          // }
        }).then(() => {
          this.deptId = item;
          this.SET_AREAID(this.deptId);
          this.SET_AREANAME(name);
          this.$router.push("/");
          setTimeout(() => {
            document.getElementById('getList').parentElement.parentElement.parentElement.parentElement.style.display = 'none';
          }, 100);
           window.location.reload();

        })

        // this.$confirm("此操作将切换城市, 是否继续?", "提示", {
        //   confirmButtonText: "确定",
        //   // cancelButtonText: "取消",
        //   type: "warning"
        // })
        //   .then(() => {
        //     this.deptId = item;
        //     this.SET_AREAID(this.deptId);
        //     this.$router.push("/");
        //   })
        //   .catch(() => {
        //     this.$message({
        //       type: "info",
        //       message: "已取消删除"
        //     });
        //     this.deptId=''
        //   });
      },
      citydataList() {
        if (deptIds) {
          this.deptId = deptIds;
          this.value=deptNames;
          // this.SET_AREAID(this.deptId);
          // this.SET_AREANAME(this.deptName);
        } else {
          deptdepts("").then(response => {
            this.cityList = response.data.data;
            if((this.cityId == undefined || this.cityId === response.data.data[0].id || this.cityId == '')) {
              this.value = response.data.data[0].deptName;
              this.deptId = response.data.data[0].id;
            } else {
              let cityIdsArray = [];
              this.cityList.forEach(item => {
                cityIdsArray.push(item.id);
              })
              if(cityIdsArray.indexOf(this.cityId) == -1) {
                this.value = response.data.data[0].deptName;
                this.deptId = response.data.data[0].id;
              } else {
                this.deptId = JSON.parse(window.localStorage.getItem("saber-areaId")).content;
                this.value = JSON.parse(window.localStorage.getItem("saber-areaname")).content;
              }
            }
            this.SET_AREAID(this.deptId);
            this.SET_AREANAME(this.value);
          });
        }
      },
      logout() {
        this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
          confirmButtonText: this.$t("submitText"),
          // cancelButtonText: this.$t("cancelText"),
          type: "warning"
        }).then(() => {
          this.$store.dispatch("LogOut").then(() => {
            this.$router.push({
              path: "/login"
            });
          });
        })
      },
      // 禁止输入空格
      keydown(e) {
        if(e.keyCode == 32) {
          e.returnValue = false;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>
